<template>
    <!-- <KeepAlive include="uImgs,videoUpload"> -->
    <div class="fromData">
        <el-form :rules="Yrules" :model="ruleForm" ref="ruleFormRef" label-width="160px" label-suffix=" :">

            <el-form-item label="请选择发布的用户名" prop="userId">
                <el-select v-model="ruleForm.userId" placeholder="请选择发布的用户名">
                    <el-option :label="val.username" v-for="(val, index) in userList" :value="val.userId" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <el-col :span="12">
                    <el-input :autosize="{ minRows: 4 }" v-model="ruleForm.content" type="textarea" />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-radio-group v-model="labelPosition" label="label position">
                    <el-radio-button label="img">图片</el-radio-button>
                    <el-radio-button label="video">视频</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="labelPosition == 'img'" label="图片" prop="image">
                <uImgs ref="uImgsCallback" @getUploadImgName="getImgName"></uImgs>
            </el-form-item>

            <el-form-item v-show="labelPosition == 'video'" label="视频" prop="video">
                <VideoUpload ref="videoRef" @getVideoName="getVideoName" @removeVideoName="removeVideoName"></VideoUpload>
            </el-form-item>

            <el-form-item label="类型" prop="type">
                <el-col :span="8">
                    <el-input :disabled="true" :value="contentType" />
                </el-col>
            </el-form-item>

            <el-form-item label="位置" prop="site">
                <div class="map">
                    <el-col :span="8">
                        <el-input :disabled="true" v-model="ruleForm.site" />
                    </el-col>
                    <SiteInfo @getMapAddress="getMapAddress"></SiteInfo>
                </div>
            </el-form-item>

            <el-form-item label="谁可以看" prop="worksLimit">
                <el-select v-model="ruleForm.worksLimit" placeholder="请选择类型限制">
                    <el-option label="仅自己可见" value="3" />
                    <el-option label="公开可见" value="1" />
                    <el-option label="仅好友可见" value="2" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" :loading="loading" @click="uploadFile(ruleFormRef)">上传</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>

        <div style="height: 150px;">

        </div>
    </div>

    <!-- </KeepAlive> -->
</template>

<script setup>
import { ref, reactive, toRaw, watchEffect, onMounted, computed } from "vue"
import uImgs from "@/components/Upload/uImgs.vue"
import VideoUpload from "@/components/Upload/videoUpload.vue"
import { mainStore } from "@/stores"
import SiteInfo from "@/components/Map/siteInfo.vue"
import { worksData } from "@/stores/worksData.js"
import { ElMessage, ElLoading } from 'element-plus'

let mWorks = worksData()

const labelPosition = ref('img')

const mStore = mainStore()

//上传按钮的加载事件
let loading = ref(false)

//表单实例
let ruleFormRef = ref()

// 上传图片的实例
let uImgsCallback = ref()
// 上传视频的实例
let videoRef = ref()

let ruleForm = reactive({
    userId: "",
    image: [],
    type: "1",
    site: "",
    video: "",
    content: "",
    worksLimit: "1"
})

const Yrules = reactive({
    userId: [{ required: true, message: '请选择上传作品的用户', trigger: 'change' }],
    site: [{ required: true, message: '请选择上传作品的位置', trigger: 'blur' }],
    content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]

})

let contentType = ref("内容")

let userList = computed(() => {
    return mStore.userList
})

// 获取点击地图后的详细地址
let getMapAddress = (e) => {
    ruleForm.site = e
    // console.log(e,"地址")
}

// 获取上传图片的名字
const getImgName = (e) => {
    let index = ruleForm.image.indexOf(e)
    ruleForm.type = 2
    videoRef.value.closeVideo()
    contentType.value = "图片"
    // console.log(index)

    if (index !== -1) {
        ruleForm.image.splice(index, 1)
    } else {

        ruleForm.image.push(e)


    }
    // ruleForm.image.push(e)
    // console.log(e, "我是父亲里面的孩子")

}

watchEffect(() => {
    if (ruleForm.image.length == 0 && ruleForm.video == "") {
        ruleForm.type = 1
        contentType.value = "内容"
    }

})

// 获取上传视频的名字
const getVideoName = (e) => {
    ruleForm.video = e
    ruleForm.type = 3
    contentType.value = "视频"
    ruleForm.image = []
    uImgsCallback.value.clearImgArr()
    // console.log(e, "我是父亲里面的视频")
}

//清除视频名字
const removeVideoName = () => {
    ruleForm.video = ""

}

//监听一下上传的是什么



// 上传作品
const uploadFile = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        // console.log(valid, "valid")
        if (valid) {
            // console.log(toRaw(ruleForm))
            uploadworksDataCallBack()
        } else {
            console.log('error submit!', fields)
        }
    })

}

// 上传作品函数
let uploadworksDataCallBack = async () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    loading.value = true
    // ruleForm
    try {
        let res = await mWorks.userUplaodWorksData(toRaw(ruleForm))
        if (res == "ok") {
            ElMessage({
                showClose: true,
                message: '上传成功',
                type: 'success',
            })
            resetForm(ruleFormRef.value)
        } else {
            ElMessage({
                showClose: true,
                message: '上传失败',
                type: 'error',
            })
        }
    } finally {
        loading.value = false
        setTimeout(() => {
            loading.close()
          
        }, 600)
    }

}

// 重置
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    uImgsCallback.value.clearImgArr()
    videoRef.value.closeVideo()

}

// 获取所有的用户
let getAllUserInfo = () => {
    mStore.getAllUser()
}



onMounted(() => {
    getAllUserInfo()
})

</script>

<style lang="scss" scoped>
.fromData {
    width: 100%;
    padding: 20px;

    .map {
        display: flex;
        flex-direction: column;
        width: 100%;

        .el-col {
            margin-bottom: 30px;
        }
    }

}
</style>